@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/demand/add.css')}}">
@section('content')
<div class="mainHrContent" id="demandAdd">
    <div class="demandadd_left">
        <div>
            <div class="demandadd_step">
                <em>1</em>服务需求
            </div>
            <div class="demandadd_main">
                <el-form :model="goodsDetails" ref="ruleForm1" label-position="top" size="mini" :rules="rules">
                    <el-form-item label="需求标题" prop="title">
                        <el-input v-model="goodsDetails.title"></el-input>
                    </el-form-item>
                    <el-form-item label="需求描述" prop="content">
                        <el-input type="textarea" v-model="goodsDetails.content" rows="10">
                        </el-input>
                    </el-form-item>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="需求区域" prop="area">
                                <el-select v-model="goodsDetails.area" placeholder="请选择">
                                    <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="需求分类" prop="cid">
                                <el-cascader v-model="goodsDetails.cid" :options="typeArr"></el-cascader>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="截止时间" prop="end_at">
                                <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="goodsDetails.end_at" type="date">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="预算金额（单位：人民币 万元）" prop="price">
                                <el-input v-model="goodsDetails.price"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div>
            <div class="demandadd_step">
                <em>2</em>公司信息
            </div>
            <div class="demandadd_main">
                <el-form :model="goodsDetails" ref="ruleForm2" label-position="top" size="mini" :rules="rules">
                    <el-form-item label="公司名称" prop="company_name">
                        <el-input v-model="goodsDetails.company_name"></el-input>
                    </el-form-item>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="公司类型" prop="company_type">
                                <el-select v-model="goodsDetails.company_type" placeholder="请选择">
                                    <el-option v-for="item in companysTypeData" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="公司行业" prop="company_industry">
                                <el-select v-model="goodsDetails.company_industry" placeholder="请选择">
                                    <el-option v-for="item in companysTypeindustry" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="公司规模" prop="company_size">
                                <el-select v-model="goodsDetails.company_size" placeholder="请选择">
                                    <el-option v-for="item in companysTypesize" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="其它">
                                <el-input v-model="goodsDetails.other"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div>
            <div class="demandadd_step">
                <em>3</em>联系信息
            </div>
            <div class="demandadd_main">
                <el-form :model="goodsDetails" ref="ruleForm" label-position="top" size="mini" :rules="rules">
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="联系人" prop="link_name">
                                <el-input v-model="goodsDetails.link_name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系人电话" prop="link_phone">
                                <el-input v-model="goodsDetails.link_phone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="部门" prop="link_department">
                                <el-input v-model="goodsDetails.link_department"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="职位" prop="link_position">
                                <el-input v-model="goodsDetails.link_position"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <button @click="submitForm('ruleForm','ruleForm1','ruleForm2')">发布需求</button>
    </div>
    <div class="demandadd_right">
        <div class="recommendStore">
            <div class="recommendStore_store">
                <img src="{{URL::asset('./img/icon/sponsor.png')}}" alt="...">
                推荐供应商
            </div>
            <div class="recommendStore_list" v-for="item in rightStore">
                <img :src="item.logo" alt="...">
                <div class="recommendStoreDetails">
                    <div class="recommendStoreDetails_name">
                        <div>@{{item.store_name}}</div>
                        <img v-if="item.quality==2" src="{{URL::asset('./img/icon/storeColloct.png')}}" alt="...">
                        <img v-if="item.hot==2" src="{{URL::asset('./img/icon/storeHot.png')}}" alt="...">

                    </div>
                    <div class="recommendStoreDetails_mes">
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListTel.png')}}" alt="...">
                            @{{item.call}}
                        </span>
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListZan.png')}}" alt="...">
                            @{{item.praise}}
                        </span>
                    </div>
                    <div class="recommendStoreDetails_mes">
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListEye.png')}}" alt="...">
                            @{{item.view}}
                        </span>
                        <span>
                            <img src="{{URL::asset('./img/icon/storeListNote.png')}}" alt="...">
                            @{{item.service}}
                        </span>
                    </div>
                    <button class="recommendStoreDetails_button">
                        <a :href="'{{route('home.store.store') }}?id='+item.id"> 查看</a>
                    </button>
                </div>
            </div>
            <a style="display:block;width:100%" :href="item.link" v-for="item in imgData">
                <img :src="item.thumb" style="width:100%" alt="...">
            </a>
        </div>
    </div>
</div>
<style>
    .el-cascader--mini {
        width: 100%;
    }
</style>
@endsection
@section('scripts')
<script>
    $(() => {
        let demandAdd = new Vue({
            el: '#demandAdd',
            data: () => {
                return {
                    rightStore: [],
                    imgData: [],
                    goodsDetails: {
                        title: '',
                        content: '',
                        area: '',
                        cid: '',
                        end_at: '',
                        price: '',
                        company_name: '',
                        company_type: '',
                        company_industry: '',
                        company_size: '',
                        other: '',
                        link_name: '',
                        link_phone: '',
                        link_department: '',
                        link_position: '',
                    },
                    rules: {
                        title: [{
                            required: true,
                            message: '请输入需求标题',
                            trigger: 'blur'
                        }],
                        content: [{
                            required: true,
                            message: '请输入需求描述',
                            trigger: 'blur'
                        }],
                        area: [{
                            required: true,
                            message: '请选择区域',
                            trigger: 'change'
                        }],
                        cid: [{
                            required: true,
                            message: '请选择分类',
                            trigger: 'change'
                        }],
                        end_at: [{
                            required: true,
                            message: '请选择截止时间',
                            trigger: 'change'
                        }],
                        price: [{
                            required: true,
                            validator: validatePrice,
                            trigger: 'blur'
                        }],
                        company_name: [{
                            required: true,
                            message: '请填写公司名称',
                            trigger: 'blur'
                        }],
                        company_type: [{
                            required: true,
                            message: '请选择公司类型',
                            trigger: 'change'
                        }],
                        company_industry: [{
                            required: true,
                            message: '请选择公司行业',
                            trigger: 'change'
                        }],
                        company_size: [{
                            required: true,
                            message: '请选择公司规模',
                            trigger: 'change'
                        }],
                        link_name: [{
                            required: true,
                            message: '请填写联系人',
                            trigger: 'change'
                        }],
                        link_phone: [{
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        }],
                        link_department: [{
                            required: true,
                            message: '请填写部门',
                            trigger: 'change'
                        }],
                        link_position: [{
                            required: true,
                            message: '请填写职位',
                            trigger: 'change'
                        }],
                    },
                    areaData: [],
                    typeArr: [],
                    companysTypeData: [],
                    companysTypeindustry: [],
                    companysTypesize: [],
                }
            },
            created() {
                apiAjax("{{ route('home.store.rightStoreApi')}}", 'get', {}, (res) => {
                    if (res.code == 0) {
                        this.rightStore = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
                apiAjax("{{ route('home.public.advs')}}", 'get', {
                    adsense_id: 27
                }, (res) => {
                    if (res.code == 0) {
                        this.imgData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                //获取需求区域
                apiAjax("{{ route('home.public.areas')}}", 'get', {}, (res) => {
                    if (res.code == 0) {
                        this.areaData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                //获取需求分类
                apiAjax("{{ route('home.public.category')}}", 'get', {
                    type: 4
                }, (res) => {
                    if (res.code == 0) {
                        this.typeArr = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                //公司类型
                apiAjax("{{ route('home.public.companys')}}", 'get', {
                    type: 1
                }, (res) => {
                    if (res.code == 0) {
                        this.companysTypeData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                //公司行业
                apiAjax("{{ route('home.public.companys')}}", 'get', {
                    type: 2
                }, (res) => {
                    if (res.code == 0) {
                        this.companysTypeindustry = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                //公司规模
                apiAjax("{{ route('home.public.companys')}}", 'get', {
                    type: 3
                }, (res) => {
                    if (res.code == 0) {
                        this.companysTypesize = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
            },
            mounted() {},
            methods: {
                submitForm(formName, formName1, formName2) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.$refs[formName1].validate((valid) => {
                                if (valid) {
                                    this.$refs[formName2].validate((valid) => {
                                        if (valid) {
                                            // 全部验证通过
                                            let data = {
                                                title: this.goodsDetails.title,
                                                content: this.goodsDetails.content,
                                                area: this.goodsDetails.area,
                                                cate_pid: this.goodsDetails.cid[0],
                                                cate_id: this.goodsDetails.cid[1],
                                                end_at: this.goodsDetails.end_at,
                                                price: this.goodsDetails.price,
                                                company_name: this.goodsDetails.company_name,
                                                company_type: this.goodsDetails.company_type,
                                                company_industry: this.goodsDetails.company_industry,
                                                company_size: this.goodsDetails.company_size,
                                                other: this.goodsDetails.other,
                                                link_name: this.goodsDetails.link_name,
                                                link_phone: this.goodsDetails.link_phone,
                                                link_department: this.goodsDetails.link_department,
                                                link_position: this.goodsDetails.link_position,
                                            };
                                            apiAjax("{{ route('home.demand.demandAddApi')}}", 'post', data, (res) => {
                                                if (res.code == 0) {
                                                    this.$message({
                                                        message: res.msg,
                                                        type: 'success'
                                                    });
                                                    window.location.href = "{{ route('home.demand.demandList') }}";
                                                } else {
                                                    this.$message({
                                                        message: res.msg,
                                                        type: 'warning'
                                                    });
                                                }
                                            }, (erro) => {

                                            });
                                        } else {
                                            return false;
                                        }
                                    });
                                } else {
                                    return false;
                                }
                            });
                        } else {
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection